<template>
    <a-modal
            class="box"
            :visible="summaryVisible"
            :width="1200"
            :confirmLoading="loading"
            :closable="close"
            @ok="$emit('ok')"
            @cancel="$emit('cancel')"
    >
        <div class="statistics">
            <a-icon style="color:#108EE9" type="exclamation-circle" />
            <span style="margin:0 10px">已选择{{ $props.summaryObj.count }}项</span>
            <span style="margin:0 10px">总计：</span>
            <span style="margin:0 10px">计划招标总数:<span style="margin-left:10px">{{ queryParam.plannedBiddingCount }}</span></span>
            <span style="margin:0 10px">计划外招标总数: <span style="margin-left:10px">{{ queryParam.plannedOutBiddingCount }}</span></span>
            <span style="margin:0 10px">计划完成数:<span style="margin-left:10px">{{ queryParam.plannedCompletion }}</span></span>
            <span style="margin:0 10px">计划未完成数:<span style="margin-left:10px">{{ queryParam.plannedNoCompletion }}</span></span>
        </div>
        <a-tabs default-active-key="0" style="text-align:center" @change="getBranchCompany">
            <a-tab-pane key="0" tab="按分公司汇总">
                <a-table
                    ref="table_branchCompany"
                    size="default"
                    rowKey="keyId"
                    :columns="columns_branchCompany"
                    :data-source="countTable"
                    :alert="true"
                    show-size-changer
                    bordered
                    show-quick-jumper
                    showPagination="auto"
                >
                    <span slot="action" slot-scope="text, record">
                        <template>
                            <span>{{ record.planCompleteRate }}%</span>
                        </template>
                    </span>
                </a-table>
            </a-tab-pane>
            <a-tab-pane key="1" tab="按项目汇总" >
                <a-table
                        ref="table_project"
                        size="default"
                        rowKey="keyId"
                        :columns="columns_project"
                        :data-source="countTable"
                        :alert="true"
                        bordered
                        show-size-changer
                        show-quick-jumper
                        showPagination="auto"
                >
                     <span slot="action" slot-scope="text, record">
                        <template>
                            <span>{{ record.planCompleteRate }}%</span>
                        </template>
                    </span>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>

<script>
    import { STable } from '@/components'
    import {biddingCompleteSummary} from '@/api/legal'
    const  columns_branchCompany = [
        {
            title:'分公司名称',
            dataIndex:'branchCompanyName'
        },
        {
            title:'计划招标总数',
            dataIndex:'plannedBiddingCount'
        },
        {
            title:'计划完成数量',
            dataIndex: 'planCompleteNums'
        },
        {
            title:'计划完成率',
            dataIndex: 'planCompleteRate',
            scopedSlots: {customRender: 'action'},
            sorter: (a, b) => a.planCompleteRate - b.planCompleteRate
        },
        {
            title:'计划外招标总数',
            dataIndex: 'plannedOutBiddingCount'
        }
    ]
    const  columns_project = [
        {
            title:'项目名称',
            dataIndex:'projectName'
        },
        {
            title:'计划招标总数',
            dataIndex:'plannedBiddingCount'
        },
        {
            title:'计划完成数量',
            dataIndex: 'planCompleteNums'
        },
        {
            title:'计划完成率',
            dataIndex: 'planCompleteRate',
            scopedSlots: {customRender: 'action'},
            sorter: (a, b) => a.planCompleteRate - b.planCompleteRate
        },
        {
            title:'计划外招标总数',
            dataIndex: 'plannedOutBiddingCount'
        }
    ]
    export default {
        name: "summaryData",
        data(){
            return {
                close: false,
                columns_branchCompany:columns_branchCompany,
                columns_project:columns_project,
                queryParam:{},
                countTable:[]
            }
        },
        components:{
            STable
        },
        props:{
            summaryVisible:{
                type: Boolean,
                default: ()=> false
            },
            selectCount:{
                type: Number,
                default: ()=> 0
            },
            summaryObj:{
                type: Object,
                default: ()=> {}
            },
            loading: {
                type: Boolean,
                default: () => false
            }
        },
        methods:{
            getBranchCompany(activeKey){
                switch (activeKey) {
                    case '0':
                        this.$props.summaryObj.contentType = 1
                        biddingCompleteSummary(this.$props.summaryObj).then(res=>{
                            this.queryParam = res.data
                            this.countTable = res.data.countTable
                        })
                        break;
                    case '1':
                        this.$props.summaryObj.contentType = 2
                        biddingCompleteSummary(this.$props.summaryObj).then(res=>{
                            this.queryParam = res.data
                            this.countTable = res.data.countTable
                        })
                        break;
                }
            }
        },
        watch:{
            'summaryObj'(obj){
                this.$props.summaryObj.contentType = 1
                biddingCompleteSummary(this.$props.summaryObj).then(res=>{
                    this.queryParam = res.data
                    this.countTable = res.data.countTable
                })
            }
        }
    }
</script>

<style scoped>
/deep/ .ant-modal-header{
    padding: 0;
}
/deep/ .ant-modal-body{
    padding: 0;
 }
/deep/ .ant-table-pagination.ant-pagination{
    display: none;
}
    .statistics{
        width:100%;
        padding:20px;
        box-sizing:border-box;
        margin-top:10px;
        background:#E6F3FC;
        position:relative;
        font-size:15px;
        text-align: center;
    }
</style>